<template>
    <div class="edit">
      <van-nav-bar
              title="收货地址"
              left-text=""
              right-text="..."
               left-arrow
              @click-left="$router.go(-1)"
              />
      <div class="newress">
        <div class="lian">
          <p>联系人</p>
          <div class="xuan">
            <div class="inputbox">
              <input type="text" placeholder="姓名" v-model="editlist.name" />
            </div>
            <div class="sex">
              <button
                :class="{ btne: num == index }"
                v-for="(item, index) in sexarr"
                :key="index"
                @click="sexClick(index)"
              >
                {{ item }}
              </button>
            </div>
          </div>
        </div>
        <div class="phone">
          <p>电话</p>
          <input type="text" placeholder="请输入手机号码" v-model="editlist.phone" />
        </div>
        <div class="shou">
          <p>地址</p>
          <input
            type="text"
            placeholder="请选择收货地址"
            v-model="editlist.address"
          />
        </div>
        <div class="shou">
          <p>门牌号</p>
          <input
            type="text"
            placeholder="例：1号楼3单元501室"
            v-model="detailaddress"
          />
        </div>
        <div class="qian">
          <p>标签</p>
          <div class="btn">
            <button
              :class="{ active: sun == index }"
              v-for="(item, index) in homearr"
              :key="index"
              @click="homeClick(index)"
            >
              {{ item }}
            </button>
          </div>
        </div>
        <div class="bttn">
          <button @click="delclick">删除</button
          ><button @click="addclick">确定</button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { address_edit, address_del } from "../utils/api";
  import { Toast } from "vant";
  export default {
    data() {
      return {
        editlist: [],
        num: null,
        sun: null,
        address: "",
        phone: "",
        name: "",
        detailaddress: "",
        sexarr: ["男", "女"],
        homearr: ["家", "学校", "公司"],
      };
    },
  
    methods: {
      ClickLeft() {
        this.$router.go(-1);
      },
      sexClick(index) {
        this.num = index;
      },
      homeClick(index) {
        this.sun = index;
      },
      fun() {
        this.$router.go(-1);
      },
      addclick() {
        let arr = this.editlist;
        address_edit({
          userid: arr.userid,
          addressid: arr.addressid,
          address: arr.address,
          phone: arr.phone,
          name: arr.name,
        }).then((res) => {
          if (res.data.code == 200) {
            Toast.success("res.data.msg");
            console.log(res.data.msg)
            this.$router.push("/address");
          }
        });
      },
      delclick() {
        let arr = this.editlist;
        address_del({
          userid: arr.userid,
          addressid: arr.addressid,
        }).then((res) => {
          if (res.data.code == 200) {
            Toast.success("res.data.msg");
            this.$router.push("/address");
          }
        });
      },
    },
    mounted() {
      // let arr = JSON.stringify(this.$route.query)
      this.editlist = this.$route.query;
      // console.log(this.$route.query);
      // address_edit(this.$route.query).then((res)=>{
      //     console.log(res);
      // })
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .edit {
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.625rem;
      box-sizing: border-box;
      h2 {
        font-size: 1rem;
      }
    }
    .newress {
      padding: 0.625rem;
      .lian {
        display: flex;
        justify-content: space-between;
        p {
          font-weight: bold;
          width: 6.25rem;
          color: #666;
        }
        .xuan {
          flex: 1;
          display: flex;
          flex-direction: column;
          .inputbox {
            border-bottom: 1px solid #f1f1f1;
            input {
              margin-bottom: 0.625rem;
              border: none;
              outline: none;
            }
          }
          .sex {
            border-bottom: 1px solid #f1f1f1;
            button {
              margin: 0.375rem 1rem 0.375rem 0;
              background-color: #fff;
              width: 3.75rem;
              height: 1.5rem;
              border: 1px solid #999;
              font-size: 0.875rem;
              color: #666;
            }
            .btne {
              color: #fff;
              background-color: #00a6ff;
              border: #00a6ff;
            }
          }
        }
      }
      .btne {
        color: #fff;
        background-color: #00a6ff;
        border: #00a6ff;
      }
      .phone {
        width: 100%;
        height: 3.125rem;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        p {
          font-weight: bold;
          width: 6.25rem;
          color: #666;
        }
        input {
          border: none;
          outline: none;
        }
        span {
          color: #00a6ff;
        }
      }
      .shou {
        width: 100%;
        height: 3.125rem;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        p {
          font-weight: bold;
          width: 6.25rem;
          color: #666;
        }
        input {
          border: none;
          outline: none;
        }
      }
      .qian {
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        p {
          font-weight: bold;
          width: 6.25rem;
          color: #666;
        }
        .btn {
          button {
            margin: 0.375rem 1rem 0.375rem 0;
            background-color: #fff;
            width: 3.75rem;
            height: 1.5rem;
            border: 1px solid #999;
            font-size: 0.875rem;
            color: #666;
          }
          .active {
            color: #fff;
            background-color: #00a6ff;
            border: #00a6ff;
          }
        }
      }
      .bttn {
        display: flex;
        justify-content: space-around;
        > button {
          margin: 1.25rem 0;
          width: 46%;
          height: 2.5rem;
          line-height: 2.5rem;
          text-align: center;
          border: none;
          background-color: #76d672;
          color: #fff;
          border-radius: 0.25rem;
          &:nth-child(1) {
            background-color: #ca6b53;
          }
        }
      }
    }
  }
  </style>